import React from 'react'
import View from 'lib/View.jsx'
import Card from 'lib/components/card.jsx'
import tips from '../common/indicator-tips.jsx'
import Card2 from 'lib/components/Card2.jsx'
import DropdownList from '../common/DropdownList.jsx'
import _ from 'underscore'
import RootScope from './RootScope.es6'
import dispatcher from 'lib/dispatcher'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import LateralBlockDiagram from 'lib/components/LateralBlockDiagram.jsx'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx'
import DefaultErrorElement from 'lib/util/defaultErrorElement.jsx'
import GeoMapWidget2 from './GeoMapWidget2.jsx'
import HealthExamination from './HealthExamination.jsx'
import imgSrc from 'lib/util/ImageSource'

import Resizable from 'lib/components/Resizable.jsx'
import { Info } from 'lib/components/Notify.jsx';

export default class RootView extends View {

  performanceListLeftChanging(item) {
    dispatcher.dispatch({
      $type: 'performance_list_left_changing',
      value: item.value
    });
  }

  performanceListRightChanging(item) {
    dispatcher.dispatch({
      $type: 'performance_list_right_changing',
      value: item.value
    });
  }

  geoListChanging(item) {
    dispatcher.dispatch({
      $type: 'geo_list_changing',
      value: item.value
    });
  }

  togglePerformaceDisplayTypeHandler() {
    dispatcher.dispatch({
      $type: 'toggle_performance_display_type'
    });
  }

  resizeChartWidget(current) {
    dispatcher.dispatch({
      $type: 'performance_resize',
      current
    })
  }

  render() {
    return (
      <div>
        <div className="pure-g">
          <div className="pure-u-1 pure-u-xl-1-2 overview-left">
            <div className="box">
              <Card title={
                <span>
                  性能评分
                  <i className="iconfont" data-tip={tips.new_overview_score}>&#xe663;</i>
                </span>
              }
              extra={
                <span style={{ lineHeight: '30px',fontWeight: 'normal',color: '#d2d2d2' }}>
                  更新频率10分钟
                </span>
              }>
                <Resizable id="web-view-resize-health" onResize={this.resizeChartWidget.bind(this)}>
                  <HealthExamination store={this.state.healthDataSource} />
                </Resizable>
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-xl-1-2 overview-right">
            <div className="box">
              <Card2 title={
                <div>
                  <DropdownList
                    key={1}
                    style={{'display':'inline-block', 'width':'130px'}}
                    current={_.find(this.state.performanceList, (item) => item.value === this.state.performanceLeftSelectedValue)}
                    list={this.state.performanceList}
                    onChanging={this.performanceListLeftChanging.bind(this)}
                  />
                  <span style={{'margin':'auto 15px'}}>对比</span>
                  <DropdownList
                    key={2}
                    style={{'display':'inline-block', 'width':'130px'}}
                    current={_.find(this.state.performanceList, (item) => item.value === this.state.performanceRightSelectedValue)}
                    list={this.state.performanceList}
                    onChanging={this.performanceListRightChanging.bind(this)}
                  />
                </div>
              } extra={
                // false?(<button
                //   className="btn-sm btn-gray"
                //   style={{'margin':'5px auto auto'}}
                //   type="button"
                //   onClick={this.togglePerformaceDisplayTypeHandler}>
                //   切换视图
                // </button>):null
                null
              }>
                <div style={{paddingTop:'16px'}}>
                  <ChartWidget
                    height={this.state.performanceChartHeight}
                    key={this.state.performanceChartKey}
                    chartType={this.state.performanceDisplayType}
                    store={this.state.performanceDataSource} />
                </div>
              </Card2>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1 pure-u-xl-1-2 overview-left">
            <div className="box">
              <Card title={
                <span>
                  响应时间分布
                  <i className="iconfont" data-tip={tips.new_overview_reponse_time}>&#xe663;</i>
                </span>
              } extra={
                <img src={imgSrc('/response-distribution.png')} alt="legend" style={{marginTop:'7px'}}/>
              }>
                <LateralBlockDiagram store={this.state.reponseDistributionData} style={{'marginTop':'28px'}} green={60} yellow={600} />
              </Card>
            </div>
            <div className="box">
              <Card title={
                <span>
                  关注网络情况
                  <i className="iconfont" data-tip={tips.new_overview_network}>&#xe663;</i>
                </span>
              }>
                <div style={{height:'252px'}}>
                  <GridWidget
                    loadingElement={<DefaultLoadingElement height={198} />}
                    errorElement={<DefaultErrorElement height={198} />}
                    nodataElement={<DefaultNoDataElement height={198} />}
                    rowClassName="pure-g"
                    rowStyle={{height:'42px'}}
                    cols={this.state.netGridColumns}
                    store={this.state.netGridDataStore} />
                </div>
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-xl-1-2 overview-right">
            <div className="box metrics-watcher">
              <Card title={
                <span>
                  观测指标分布
                  <i className="iconfont" data-tip={tips.new_overview_geo}>&#xe663;</i>
                </span>
              } extra={
                <DropdownList
                  style={{'width':'130px',marginTop:'-4px'}}
                  current={_.find(this.state.geoList, (item) => item.value === this.state.geoSelectedValue)}
                  list={this.state.geoList}
                  onChanging={this.geoListChanging.bind(this)}
                />
              }>
                <GeoMapWidget2
                  key={this.state.geoKey}
                  chart={{height:415}}
                  store={this.state.geoChart}
                  allowOverlap={true}
                  legend={{
                    align:'right',
                    layout:'vertical'
                  }}/>
              </Card>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

RootView.defaultProps = {
  Scope: RootScope
}
